<template>
	<view>
		<u-navbar back-text="返回" title="订单详情"></u-navbar>
		<view class="" v-if="order">
			<view class="text-lg flex flex-col items-center justify-center p-60 bg-red-600 text-white font-bold">
				<view class="text-lg">
					{{order.subject}}
				</view>
				<view class="text-base text-gray-200">
					已支付
				</view>
			</view>
			<uni-card title="商品列表" :is-full="true">
				<view class="shadow-sm rounded-sm bg-white border border-solid border-gray-200 p-20 mb-20"
					v-for="goods in order.goods" :key="goods.id">
					<view class="flex items-center" @click="$hd.redirect(`/pages/goods/goods`,{id:goods.id})">
						<view class="flex items-center flex-1">
							<u-avatar :src="order.goods[0].preview" mode="square" class="mr-20" size="large">
							</u-avatar>
							{{order.goods[0].title}}
						</view>
						<view class="">
							{{order.price}} 元
						</view>
					</view>
				</view>
			</uni-card>

			<view class="mt-30">
				<uni-card title="收化地址" :is-full="true">
					北京市小营路18号
				</uni-card>
			</view>
			<view class="mt-30">
				<uni-card title="订单详情" :is-full="true">
					<view class="text-sm text-gray-800">
						<view class="mb-20">
							订单编号: {{order.sn}}
						</view>
						<view class="mb-20">
							下单时间: {{order.created_at}}
						</view>
						<view class="mb-20">
							订单总客: {{order.price}}
						</view>
					</view>
				</uni-card>
			</view>
		</view>

		<hd-tabbar></hd-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: null
			}
		},
		async onLoad(options) {
			this.order = await this.$api.get(`member/order/${options.id}`)
			console.log(this.order);
		},
		methods: {

		}
	}
</script>

<style>

</style>
